<template>
  <div>
    <!-- 导航栏 -->
    <van-nav-bar title="黑马优购" fixed>
      <div class="left_arrow" @click="()=>{ $router.go(-1) }" slot="left">
        <van-icon name="arrow-left"/>
        <span style=" color:#fff ">返回</span>
      </div>
    </van-nav-bar>
    <br>
    <br>
    <br>
    <br>
    <van-address-edit
      :area-list="areaList"
      show-postal
      show-delete
      show-set-default
      show-search-result
      :search-result="searchResult"
      :area-columns-placeholder="['请选择', '请选择', '请选择']"
      @save="onSave"
      @delete="onDelete"
      @change-detail="onChangeDetail"
    />
  </div>
</template>

<script>
import areaList from "./area.js";
export default {
  data() {
    return {
      areaList,
      searchResult: [],
      addressinfo: {
        id: "",
        name: "",
        tel: "",
        postalCode: "",
        areaCode: "",
        address: "",
        isDefault: ""
      }
    };
  },
  methods: {
    onSave(content) {
      console.log(content);
      this.addressinfo.name = content.name;
      this.addressinfo.tel = content.tel;
      this.addressinfo.address =
        content.province +
        content.city +
        content.county +
        content.addressDetail;
      this.addressinfo.isDefault = content.isDefault;
      this.addressinfo.postalCode = content.postalCode;
      this.addressinfo.areaCode = content.areaCode;
      window.sessionStorage.setItem(
        "address",
        JSON.stringify(this.addressinfo)
      );
      this.$toast("save");
      this.$router.push("/commit");
    },
    onDelete() {
      this.$toast("delete");
    },
    onChangeDetail(val) {
      if (val) {
        this.searchResult = [
          {
            name: "黄龙万科中心",
            address: "杭州市西湖区"
          }
        ];
      } else {
        this.searchResult = [];
      }
    }
  }
};
</script>

<style lang="less" scoped>
.van-nav-bar {
  background-color: #d81e06;
}
.van-nav-bar__title {
  color: #fff;
  font-size: 16px;
}

.van-nav-bar__text {
  color: #fff;
  font-size: 14px;
}
.van-icon::before {
  display: inline-block;
  color: #fff;
}
</style>